﻿@model WeddingEventManagementApp.Models.ClientPhone_VM
<div class="row phone-row">
    @Html.HiddenFor(model => model.ID)
    <div class="seven column">
        <div class="row">
            <div class="two column mobile-one">
                (@Html.TextBoxFor(model => model.AreaCode, new { maxLength = "3", placeholder = "###", @class = "three-digits" }))
            </div>
            <div class="four column mobile-two">
                @Html.TextBoxFor(model => model.Exchange, new { maxLength = "3", placeholder = "###", @class = "three-digits" }) 
                &mdash; 
                @Html.TextBoxFor(model => model.LineNumber, new { maxLength = "4", placeholder = "####", @class = "four-digits" })
            </div>
            <div class="two column mobile-one">
                x @Html.TextBoxFor(model => model.Extension, new { placeholder = "Ext", @class = "extension" })
            </div>

            <div class="four column mobile-four">
                @Html.DropDownListFor(model => model.PhoneNumberType,
                from PhoneNumberTypeEnum type in Enum.GetValues(typeof(PhoneNumberTypeEnum))
                select new SelectListItem() { Text = type.ToString(), Value = type.ToString() }, new { @class = "ddl", style="width: 80%" })

                @if (Model != null)
                {
                    <a href="javascript:void(0)" data-id="@Model.ID" class="delete-phone icomoon">&#xe060;</a>
                }
            </div>
        </div>
    </div>
    <div class="five column">
        @Html.ValidationMessageFor(model => model.AreaCode)
        @Html.ValidationMessageFor(model => model.Exchange)
        @Html.ValidationMessageFor(model => model.LineNumber)
        @Html.ValidationMessageFor(model => model.Extension)
    </div>
</div>